<template>
	<view class="table-box">
		<view class="table">
			<view class="caption">{{caption}}</view>
			<view class="thead">
				<view class="tr">
					<view class="th" v-for="(item, index) in heads" :key="index" :style="{width: 100/heads.length+'%'}">
						{{item}}
					</view>
				</view>
			</view>
			<view class="tbody">
				<view class="tr" v-for="(item, index) in bodys" :key="index">
					<view class="td" v-for="(subitem, subindex) in item" :key="subindex" :style="{width: 100/item.length+'%'}">
						{{subitem}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			caption: { // 标题
				type: String,
				default: '',
			},
			heads: {
				type: Array,
				default:() => {
					return []
				}
			},
			bodys: {
				type: Array,
				default:() => {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.table-box {
		padding: 0 $uni-spacing-20 $uni-spacing-20;
		border-radius: $uni-border-radius-base;
		background-color: $uni-color-white;
		.table {
			.caption {
				color: $uni-color-blue;
				padding: $uni-spacing-20 0;
				text-align: center;
			}
			.thead {
				.tr {
					display: flex;
					justify-content: space-around;
					.th {
						padding: $uni-spacing-10 0;
						background-color: $uni-border-color;
						color: $uni-color-blue;
						font-weight: normal;
						font-size: $uni-font-size-md;
						text-align: center;
						border-style: solid $uni-border-color;
						border-width: 1px 0 0 1px;
						&:last-child {
							border-right-width: 1px;
						}
					}
				}
			}
			.tbody {
				.tr {
					display: flex;
					justify-content: space-around;
					.td {
						padding: $uni-spacing-10 0;
						text-align: center;
						font-size: $uni-font-size-md;
						border: 1px solid $uni-border-color;
						border-width: 1px 0 0 1px;
						&:last-child {
							border-right-width: 1px;
						}
					}
					&:last-child {
						.td {
							border-bottom-width: 1px;
						}
					}
				}
			}
		}
	}
</style>
